<template>
  <div class="vip-config-container">
    <h2>会员体系</h2>
    <div class="vip-list">
      <div v-for="level in safeData" :key="level.id" class="vip-item">
        <div class="level-badge">
          <el-badge :value="level.count" text-color="#fff" type="primary">
            <el-icon><star /></el-icon>
          </el-badge>
        </div>
        <div class="level-info">
          <h4>{{ level.name }}</h4>
          <p class="discount">折扣率 {{ level.discount }}%</p>
          <p class="count">当前人数：{{ level.count }}</p>
        </div>
        <div class="actions">
          <el-button size="small" @click="handleEdit(level)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(level.id)">
            删除
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, PropType, computed } from 'vue';
import { ElBadge, ElButton, ElIcon } from 'element-plus';

interface VipLevel {
  id: string;
  name: string;
  discount: number;
  count: number;
}

const props = defineProps({
  data: {
    type: Array as PropType<VipLevel[]>,
    required: true
  }
});

const safeData = computed(() => props.data ?? []);

const emit = defineEmits(['edit', 'delete']);

const handleEdit = (level: VipLevel) => {
  emit('edit', level);
};

const handleDelete = (id: string) => {
  emit('delete', id);
};
</script>

<style scoped>
.vip-config-container {
  padding: 24px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.vip-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.vip-item {
  padding: 24px;
  border-radius: 8px;
  background-color: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.level-badge {
  margin-right: 24px;
}

.level-badge .el-badge__content {
  font-size: 12px;
  right: -8px;
  top: -4px;
}

.level-info {
  flex-grow: 1;
}

.level-info h4 {
  margin: 0;
  font-size: 18px;
}

.level-info p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #606266;
}

.actions {
  display: flex;
  gap: 8px;
}
</style>



